总结开发过程踩到的坑（一）

在日常工作中，时常会碰到各种各样的坑，有时真的觉得很多时候开发的经验都是踩坑踩出来的。在通往大牛的道路上，希望自己能够跨越重重阻碍，越走越远。学会时常总结，不断提升自己。

---

本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑，一方面加深自己对于该部分的理解，另一方面希望能够分享给大家，知识在于分享，当然踩过的坑也不例外（滑稽）。

目录

1. margin 重叠问题
2. placeholder 自定义样式
3. 伪类和伪元素
4. title 超出省略
5. scroll 自定义样式
6. sticky 定位
7. 配置 swiper
8. 移动端键盘遮挡问题
9. 异步回调解决方案

1. margin 重叠问题

这是一个比较常见的经常在开发中碰到的问题，这里就不多说了，常见解决办法：

1. 创建新的 BFC 如 overflow: hidden;
2. 使用 padding
3. 尽量使用同一方向的 margin

2. placeholder 自定义样式

之前开发项目中碰到的需求，兼容写法如下：

/* IE 9 及以下版本不支持 */
input:-ms-input-placeholder {

}
input:-moz-placeholder {

}
input::-moz-placeholder {

}
input::-webkit-input-placeholder {

}

3. 伪类和伪元素

这两者很容易混淆，说的简单的一点，两者的区别在于：

CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。

4. title 超出省略

在移动端标题超出部分还是比较常见的，兼容性也 ok：

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;

5. scroll 自定义样式

/* Chrome */
::-webkit-scrollbar    //滚动条整体部分
::-webkit-scrollbar-button   //滚动条两端的按钮
::-webkit-scrollbar-track   // 外层轨道
::-webkit-scrollbar-track-piece    //内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个
::-webkit-scrollbar-corner   //边角
::-webkit-resizer   ///定义右下角拖动块的样式

/* IE */
  scrollbar-base-color: #C0C0C0;
  scrollbar-base-color: #C0C0C0;
  scrollbar-3dlight-color: #C0C0C0;
  scrollbar-highlight-color: #C0C0C0;
  scrollbar-track-color: #EBEBEB;
  scrollbar-arrow-color: black;
  scrollbar-shadow-color: #C0C0C0;
  scrollbar-dark-shadow-color: #C0C0C0;

Chrome 几乎可以完整修改 scrollbar 样式，但是 IE 比较有局限性，只能修改颜色，如果想要完美兼容，那么只能自己模拟实现一个 scrollbar 了。

6. sticky 定位

粘性定位，是一个比较有趣的 CSS3 属性，粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

实例 demo : 粘性定位

7. 配置 Swiper

Swiper 是一个使用率很高的插件，这里说一些比较陌生的属性与方法：

//活动块居中
centeredSlides: true,
//触摸距离与 slide 滑动距离的比率
touchRatio: 0.5,
//当 swiper 样式或者子元素改变时，会自动初始化 swiper ，默认 false
observer: true,
//swiper从当前slide开始过渡到另一个slide时执行。触摸情况下，如果释放slide时没有达到过渡条件而回弹时不会触发这个函数
onSlideChangeStart: function(swiper) {
    //获取当前索引
    console.log(swiper.realIndex);
},
//回调函数，当你轻触(tap)Swiper后执行。
onTap: function(swiper) {
    //获取 tap 索引
    mySwiper.slideTo(swiper.clickedIndex);
}

8. 移动端键盘遮挡问题

有些时候，如：需要将某一 button 固定到屏幕底部，这个时候如果弹出键盘，那么 button 则会跟着跑到键盘上面（无论是 absolute 还是 fixed），所以可以在 focus 的时候，隐藏 button，而在 blur 的时候显示 button ，但是这时有一个问题：在安卓手机上没有问题，收起键盘可以出发 blur 事件，但是 IOS 端则没有触发，所以解决办法是，可以改用 resize 事件替代 blur 事件。

9. 异步回调解决方案

异步处理一直以来都是 js 极其重要的一部分，这里暂不提框架，原始的异步处理一般是：

创建异步对象XMLHttpRequest。
设置请求参数（请求方式，请求资源的相对路径，是否异步）。
设置回调函数，用来处理服务器响应，使用onreadystatechange。
获取异步对象的readyState属性，根据服务器返回状态信息判断是否请求成功。

如果存在多个请求，且数据相互有依赖关系的话，代码写起来会比较复杂，看起来杂乱无章，同时不利于后期维护。在 ES6 中，提出了 Promise 的概念，给出了异步回调的解决方案：

var task = new Promise(function(resolve, reject) {
 if (/* 异步操作成功 */){
     resolve(result);
 } else {
     reject(error);
 }
});

task.then(function(response) {
 // success
}, function(error) {
 // fail
});

可以看出，使用 Promise 可以通过链式调用避免了层层嵌套，同时便于代码阅读和理解。

参考文献

1. 详解 CSS 属性 - 伪类和伪元素的区别
2. CSS | MDN